<template>
	<view class="contant">
		<view class="vote"></view>
		<view style="position: relative; z-index: 9; margin-bottom: 50px">
			<u-sticky offset-top="0">
				<view :class="[art == 1 ? 'tops' : '']">
					<!-- #ifdef APP -->
					<view style="height: 44px"></view>
					<!-- #endif -->
					<!-- #ifdef H5 -->
					<view style="height: 10px"></view>
					<!-- #endif -->
					<view
						style="text-align: center; font-size: 16px; font-weight: 700; line-height: 44px; color: #333333">
						我的项目
					</view>
				</view>
			</u-sticky>

			<view class="" style="">
				<view style="padding: 15px">
					<view v-if="arr.length != 0" v-for="(it, i) in arr" :key="i" @click="detail(it)"
						style="padding: 15px; background-color: #fff; border-radius: 10px; margin-bottom: 15px;">
						<view class="flex" style="
								justify-content: space-between;
								border-radius: 10px;
								padding-bottom: 15px;
								border-bottom: 1px solid #ececec;
							">
							<view class="">
								<view class="flex">
									<image style="width: 50px; border-radius: 10px;height: 50px;"
										:src="imgurl + it.logo_image" mode=""></image>
									<view style="margin-left: 10px">
										<view style="font-size: 16px; font-weight: 400; color: #1d1f20">{{ it.title }}
										</view>
										<view class="flex" style="margin-top: 6px">
											<view v-for="(tt, ids) in it.label" :key="ids"
												style="padding-right: 10px;font-size: 13px;">
												{{ tt }}
											</view>
										</view>
									</view>
								</view>
								<view
									style="margin-top: 15px; display: flex; align-items: center; justify-content: space-around">
									<view @click.stop="nav(1, it)"
										style="border: 1px solid #E3F8E9; padding: 4px 5px; text-align: center; border-radius: 4px;background-color: #E3F8E9;">
										<!-- <image style="width: 30px" src="/static/img/2.png" mode="widthFix"></image> -->
										<view style="font-size: 12px;font-weight: 500;color: #55B17B;">官方明细</view>
									</view>
									<view @click.stop="nav(2, it)"
										style="border: 1px solid #FDEBE8; padding: 4px 5px; text-align: center; border-radius: 4px;margin-left: 10px;background-color: #FDEBE8;">
										<!-- <image style="width: 30px" src="/static/img/3.png" mode="widthFix"></image> -->
										<view style="font-size: 12px;font-weight: 500;color: #D27F79; ">结算明细</view>
									</view>
									<view @click.stop="nav(3, it)"
										style="border: 1px solid #FFEFE2; padding: 4px 5px; text-align: center; border-radius: 4px;margin-left: 10px;background-color: #FFEFE2;">
										<!-- <image style="width: 30px" src="/static/img/4.png" mode="widthFix"></image> -->
										<view style="font-size: 12px; font-weight: 500;color: #E2A85F; ">作业教程</view>
									</view>
									<view @click.stop="nav(4, it)"
										style="border: 1px solid #EBF1FF; padding: 4px 5px; text-align: center; border-radius: 4px;margin-left: 10px;background-color: #EBF1FF;">
										<!-- <image style="width: 30px" src="/static/img/5.png" mode="widthFix"></image> -->
										<view style="font-size: 12px;font-weight: 500;color: #7A808A;">推广码</view>
									</view>
								</view>
							</view>
							<u-icon name="arrow-right" size="14"></u-icon>
						</view>

						<view class="flex" @click.stop="nav(5, it)" style="margin-top: 15px" v-if="
								(it.noticeone != null && it.noticeone.my_click == '0') ||
								(it.noticeone != null && show_noticeone == '1')
							">
							<view class="flex" style="justify-content: center; height: 20px">
								<image style="width: 12px; display: block" src="/static/font/15.png" mode="widthFix">
								</image>
								<!-- </image> -->
							</view>
							<view style="
									line-height: 20px;
									margin-left: 15px;
									overflow: hidden;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									text-overflow: ellipsis;
									font-size: 12px;
									font-weight: 500;
									color: #333333;
								">
								{{ it.noticeone.title }}
								<!-- <text>5555555</text>11 -->
							</view>
						</view>
						<view class="flex" @click.stop="nav(6, it)" style="margin-top: 15px"
							v-if="it.noticetwo != null">
							<view class="flex" style="justify-content: center; height: 20px">
								<image style="width: 56px; display: block" src="/static/img/8.png" mode="widthFix">
								</image>
							</view>
							<view style="
									line-height: 20px;
									margin-left: 15px;
									overflow: hidden;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									text-overflow: ellipsis;
								">
								{{ it.noticetwo.title }}
							</view>
						</view>
					</view>
					<view v-if="arr.length == 0" class="flex" style="flex-direction: column; margin-top: 25%">
						<image style="width: 218px" src="/static/img/17.png" mode="widthFix"></image>
						<view style="
								text-align: center;
								margin-top: 15px;
								font-size: 12px;
								color: #686868;
								line-height: 20px;
								letter-spacing: 2px;
							">
							<!-- 有申请项目的记录才会显示在这里哦 -->
							暂无您申请的项目
						</view>
					</view>
				</view>
			</view>
			<!-- <view style="position: fixed;bottom: 7%;left: 50%;transform: translateX(-50%);z-index: -1;">
				<image style="width: 73px;" :src="imgurl + com_info.logo" mode="widthFix"></image>
			</view> -->
		</view>
		<!-- 交单弹窗 -->
		<u-popup :round="10" :show="show" mode="center" @close="show = false">
			<view style="padding: 15px; width: 90%; margin: 0 auto">
				<view style="text-align: center">项目审核报名通知</view>
				<view class="flex" style="margin-top: 30px">
					<image style="width: 16px; margin-right: 10px" src="/static/img/13.png" mode="widthFix"></image>
					<view style="font-size: 14px; color: #ff3331">请注意查看: 如有暂停或驳回，请立即禁止作业!</view>
				</view>
				<view v-if="pop.mynotice != null" class=""
					style="margin-top: 15px; padding: 15px; background-color: #f7f9fa; border-radius: 10px">
					<view class="" v-if="pop.mynotice.signinfo != null" style="position: relative">
						<view class="flex" style="margin-bottom: 15px">
							<view style="font-size: 14px">报名项目：</view>
							<view style="margin-left: 15px">{{ pop.mynotice.noticeproject.title }}</view>
						</view>
						<view class="flex" style="margin-bottom: 15px">
							<view style="font-size: 14px">报名状态：</view>
							<view style="margin-left: 15px">{{ pop.mynotice.signinfo.status_text }}</view>
						</view>
						<view class="flex" style="margin-bottom: 15px">
							<view style="font-size: 14px">报名信息：</view>
							<view style="margin-left: 15px">
								{{ pop.mynotice.signinfo.signname }}
								{{ pop.mynotice.signinfo.signphone }}
							</view>
						</view>
						<view class="flex" style="margin-bottom: 15px" v-if="pop.mynotice.signinfo.status == 3">
							<view style="font-size: 14px">驳回原因：</view>
							<view style="margin-left: 15px; width: 65%">{{ pop.mynotice.signinfo.audit_result_text }}
							</view>
						</view>
						<view class="flex" style="margin-bottom: 15px" v-if="pop.mynotice.signinfo.status == 4">
							<view style="font-size: 14px">暂停原因：</view>
							<view style="margin-left: 15px; width: 65%">{{ pop.mynotice.signinfo.pause_result }}</view>
						</view>
						<view class="logo" style="position: absolute; right: 0; top: 0">
							<image :src="`https://qcadmi.qcbd8.com/${pop.mynotice.noticeproject.logo_image}`"
								style="width: 50px; height: 50px; border-radius: 50%" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view @click="msgs"
					style="margin-top: 10px; color: #777979; font-size: 12px; text-align: center; text-decoration: underline">
					共有{{ pop_num }}条信息未读
				</view>
				<view style="padding: 0px 30px; margin-top: 30px; display: flex; justify-content: center">
					<view @click="confirms(pop.mynotice)" class="flex" style="
							width: 255px;
							height: 40px;
							background: #2447FF;
							border-radius: 20px;
							justify-content: center;
							color: #fff;
							font-size: 14px;
						">
						已阅
					</view>
				</view>
				<view style="margin-top: 10px; color: #777979; font-size: 12px; text-align: center">已阅后将不再弹出提醒</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import config from '../../common/config/index.js';
	export default {
		data() {
			return {
				show: false,
				arr: [],
				imgurl: config.imgurl,
				pop: {
					mynotice: {
						signinfo: '',
						noticeproject: '',
					},
				},
				pop_num: '',
				show_noticeone: '',
				com_info: '',
				art: 0,
			};
		},
		onLoad() {
			this.common();
		},
		onShow() {
			this.checks();
		},
		methods: {
			onPageScroll(e) {
				if (e.scrollTop >= 44) {
					this.art = 1;
				} else {
					this.art = 0;
				}
			},
			async common() {
				let res = await this.$http.index.index();
				if (res.code == 1) {
					this.com_info = res.data;
				}
			},
			//个人消息
			msgs() {
				uni.navigateTo({
					url: '/pages/home/my_project?type=1',
				});
			},
			nav(i, it) {
				switch (i) {
					case 1:
						uni.navigateTo({
							url: '/pages/project/official?project_id=' + it.id,
						});
						break;

					case 2:
						uni.navigateTo({
							url: '/pages/project/settlement?type=2&project_id=' + it.id,
						});
						break;
					case 3:
						// uni.navigateTo({
						// 	url: '/pages/home/detail?id=' + it.articlework.id,
						// });
						uni.navigateTo({
							url: '/pages/project/detail?project_id=' + it.id,
						});
						break;
					case 4:
						uni.navigateTo({
							url: '/pages/project/detail?id=2&project_id=' + it.id,
						});
						break;
					case 5:
						uni.navigateTo({
							url: '/pages/home/detail?id=' + it.noticeone.notice_id + '&type=notice',
						});
						break;
					case 6:
						uni.navigateTo({
							url: '/pages/home/detail?id=' + it.noticetwo.notice_id + '&type=notice',
						});
						break;
				}
			},
			//是否有新消息
			async checks() {
				let res = await this.$http.index.myProjectList();
				if (res.code == 1) {
					this.arr = res.data.projectList;
					this.pop_num = res.data.popnum;
					this.show_noticeone = res.data.show_noticeone;
					if (res.data.popnum != 0) {
						this.show = true;
						this.pop = res.data.pop;
					}
					// for (let i = 0; i < this.arr.length; i++) {
					// 	if (this.arr[i].noticeone != null) {
					// 		if (this.arr[i].noticeone.joinuser.is_read == '1') {
					// 			if (this.arr[i].open_mynotice == '1' && this.arr[i].noticeone.joinuser.is_read == '1') {
					// 				this.show = true
					// 			}else{
					// 				console.log(5555);
					// 			}
					// 		}else{
					// 			console.log(6666);
					// 		}

					// 	}
					// }
				}
			},
			detail(e) {
				uni.navigateTo({
					url: '/pages/project/detail?project_id=' + e.id,
				});
			},
			//已阅
			async confirms(e) {
				let res = await this.$http.index.readAll({
					notice_id: e.notice_id,
				});
				if (res.code == 1) {
					this.show = false;
					this.checks();
				}
			},
		},
	};
</script>
<style>
	page {
		background-color: #f7f9fa;
	}
</style>

<style scoped lang="scss">
	/deep/ .u-sticky {
		top: 0 !important;
	}

	.tops {
		// background-image: url('@/static/img/73.png');
		background-color: #2447FF;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		z-index: 10000;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.contant {
		.vote {
			background-image: url('@/static/img/6.png');
			background-size: 100%;
			background-repeat: no-repeat;
			width: 100%;
			position: fixed;
			height: 100%;
		}
	}

	/deep/.u-popup__content {
		width: 90%;
		margin: 0 auto;
	}
</style>